<script>
import BaseUrl from "@/http/request/BaseUrl";
import TokenAxios from "@/http/request/TokenAxios";
export default {
  data() {
    return {
      //请求头
      headers: {Authorization: ''},
      imgUrl: '',
      // 获取用户列表参数

      // 当前每页显示多少条数据
      pageSize: 10,
      //分页相关数据
      currentPage: this.$router.currentRoute.query.page ? parseInt(this.$router.currentRoute.query.page) : 1,
      tableData: [],
      total: 0,
      keyword:'',
      // 控制添加用户对话框的显示与隐藏
      addDialogVisible: false,
      assignRoleById:false,
      // 添加用户的表单数据
      ruleForm: {
        username: '',
        password: '',
        nickname: '',
        gender: '',
        phone: '',
        enable: '',
        roleId: '',
      },
       //分配角色
      radio:'',
      // 表单验证规则
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur'}
        ],
        nickname: [
          {required: true, message: '请输入昵称', trigger: 'blur'},
          {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}
        ],
        phone: [
          {required: true, message: '请输入手机号码', trigger: 'blur'},
          {min: 11, max: 11, message: '长度在11个字符', trigger: 'blur'}
        ],
        gender: [
          {required: true, message: '请至少选择1种性别', trigger: 'blur'}
        ],
        enable: [
          {required: true, message: '请至少选择1种用户状态', trigger: 'blur'}
        ],
        roleId: [
          {required: true, message: '请至少选择1种角色', trigger: 'blur'}
        ]
      },
      //修改用户信息表单验证
      editUserFormRules: {
        nickname: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur'}
        ],
        avatar: [],
        personalized: [
          {required: true, message: '请输入个人简介', trigger: 'blur'},
          {min: 1, max: 10, message: '长度在1到50个字符', trigger: 'blur'}
        ],
      },
      // 当前要修改用户的id
      editUserId: '',
      // 控制修改用户对话框的显示与隐藏
      editDialogVisible: false,
      // 修改用户的表单数据
      editUserForm: {
        nickname: '',
        avatar: '',
        personalized: '',

      },

    }
  },

  methods: {
    //搜索
    search(){
      console.log(this.keyword)

      let page = this.currentPage; // 当前页码
      let url = BaseUrl.ADMIN_ACCOUNT + '/admin/user/search?keyword=' + this.keyword + '&page=' + page;
      console.log(url)
      TokenAxios.get(url).then((response) => {
        let jsonResult = response.data;
        console.log(jsonResult.data)
        if (jsonResult.state == 20000) {
          this.tableData = jsonResult.data.list;
          this.tableData.forEach((item)=> {
            if (item.enable == 2) {
              item.enables = {
                text: "未启用",
                type: 'warning'
              }
            } else if (item.enable == 1) {
              item.enables = {
                text: "启用",
                type: 'success'
              }
            } else {
              item.enables = {
                text: "封禁",
                type: 'danger'
              }
            }
          })
          console.log(this.tableData)
          this.currentPage = jsonResult.data.currentPage;
          this.pageSize = jsonResult.data.pageSize;
          this.total = jsonResult.data.total;
          this.maxPage = jsonResult.data.maxPage;
        }else {
          let title = '操作失败';
          this.$alert(jsonResult.message, title, {
            confirmButtonText: '确定',
            callback: action => {
            }
          })
        }
      })
    },
    openAssignRoleById(user) {
      this.assignRoleById = true
      this.editUserId = user.id
    },
    StartEditUserInfo(user) {
      console.log(user.id)
      this.editDialogVisible = true
      this.editUserId = user.id
    },
    //分配角色
    roleByUserId(){
      let url = BaseUrl.ADMIN_ACCOUNT+'/admin/user/update/role';

      let userRole = {
        roleId:this.radio,
        userId: this.editUserId
      }
      TokenAxios.post(url,userRole).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.$message({
            message: '成功!',
            type: 'success'
          });
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      }).catch((error) => {
        console.log('请求出错:', error);
      });

    },
    //删除用户
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  openDeleteConfirm(user) {
      let message = '此操作将永久删除用户，是否继续？';
      this.editUserId = user.id
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleDelete();
      }).catch(() => {
      });
    },
    handleDelete() {
      let url = BaseUrl.ADMIN_ACCOUNT + '/admin/user/delete';
      let deleteUser = {
        userId: this.editUserId
      }
      TokenAxios.post(url, deleteUser).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.$message({
            message: '删除成功!',
            type: 'success'
          });
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      }).catch((error) => {
        console.log('请求出错:', error);
      });
    },
    //修改名感personalized
    updatePersonalized() {
      let url = BaseUrl.ADMIN_ACCOUNT + '/admin/user/update/personalized';
      let userPersonalizedUpdateDTO = {
        personalized: this.editUserForm.personalized,
        userId: this.editUserId
      }
      TokenAxios.post(url, userPersonalizedUpdateDTO).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.$message({
            message: '修改成功!',
            type: 'success'
          });
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      }).catch((error) => {
        console.log('请求出错:', error);
      });

    },
    //修改用户敏感头像
    updateAvatar() {
      let url = BaseUrl.ADMIN_ACCOUNT + '/admin/user/update/avatar';
      let userAvatarUpdateDTO = {
        avatar: this.imgUrl.url,
        userId: this.editUserId
      }
      TokenAxios.post(url, userAvatarUpdateDTO).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.$message({
            message: '修改成功!',
            type: 'success'
          });
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      }).catch((error) => {
        console.log('请求出错:', error);
      });
    },
    //修改用户敏感昵称
    updatenickname() {
      let url = BaseUrl.ADMIN_ACCOUNT + '/admin/user/update/nickname';
      let userNicknameUpdateDTO = {
        nickname: this.editUserForm.nickname,
        userId: this.editUserId
      }
      TokenAxios.post(url, userNicknameUpdateDTO).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.$message({
            message: '修改成功!',
            type: 'success'
          });
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      }).catch((error) => {
        console.log('请求出错:', error);
      });
    },
    handleSuccess(response, file, fileList) {//上传成功后调用的方法
      let imageUrl = BaseUrl.RESOURCE + response.data
      let fileName = file.name
      let imageObj = {
        name: fileName,
        url: imageUrl
      }
      this.imgUrl = {
        name: fileName,
        url: imageUrl
      }
      console.log(this.imgUrl)
      this.show = false
      //response 代表服务器响应的内容(JsonResult,response.data是图片路径)
      //file代表上传成功的文件对象  fileList代表上传成功的多个文件对象(选择多个文件时)
      //response代表JsonResult对象 response.data得到的时服务器响应的图片路径
      // this.user.imgUrl=response.data;
    },
    //添加用户
    submitForm() {
      let url = BaseUrl.ADMIN_ACCOUNT + '/admin/user/add-new';
      console.log('url = ' + url);
      TokenAxios.post(url, this.ruleForm).then((response) => {
        let jsonResult = response.data;
        console.log(jsonResult);
        if (jsonResult.state == 20000) {
          this.$message({
            showClose: true,
            message: '添加用户成功！',
            type: 'success'
          });
        } else {
          let title = '操作失败';
          this.$alert(jsonResult.message, title, {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      }).catch(error => {
        let title = '错误';
        let message = '程序执行过程中出现错误，请打开浏览器的控制台查看详细错误信息！';
        this.$alert(message, title, {
          confirmButtonText: '确定',
          callback: action => {
          }
        });
        console.log(error);
      })
    },

    //用户封禁
    handleChange(user) {
      let enableText = ['禁用', '启用'];
      let url = BaseUrl.ADMIN_ACCOUNT + '/admin/user/' + user.id;
      let enable = user.enable;
      if (enable == 1) {
        url += '/enable';
        ``
      } else {
        url += '/disable';
      }
      console.log('url = ' + url);

      TokenAxios.post(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.$message({
            message: '将【' + user.username + '】的启用状态修改为【' + enableText[enable] + '】成功！',
            type: 'success'
          });
          this.loadUserList();
        } else if (jsonResult.state == 40400) {
          this.$alert(jsonResult.message, '操作失败', {
            confirmButtonText: '确定',
            callback: action => {
              this.loadUserList();
            }
          });
        } else {
          this.$alert(jsonResult.message, '操作失败', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      }).catch(error => {
        let title = '错误';
        let message = '程序执行过程中出现错误，请打开浏览器的控制台查看详细错误信息！';
        this.$alert(message, title, {
          confirmButtonText: '确定',
          callback: action => {
          }
        });
        console.log(error);
      });
    },
    // 切换分页
    handleCurrentChange(page) {
      if (this.keyword) {
        this.currentPage = page; // 更新当前页码值
        this.search(); // 执行搜索方法
      } else {
        this.$router.replace('?page=' + page);
        this.loadUserList();
      }
    },
    loadUserList() {
      let page = this.$router.currentRoute.query.page;
      if (!page) {
        page = 1;
      }

      let url = BaseUrl.ADMIN_ACCOUNT + '/admin/user?page=' + page;
      console.log('url=' + url);

      TokenAxios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          console.log(jsonResult)
          this.tableData = jsonResult.data.list;
          this.tableData.forEach((item)=>{
            if(item.enable==2){
              item.enables = {
                text:"未启用",
                type: 'warning'
              }
            }else if(item.enable==1){
              item.enables = {
                text: "启用",
                type: 'success'
              }
            }else if(item.enable==0){
              item.enables = {
                text: "封禁",
                type: 'danger'
              }
            }else {
              let title = '操作失败';
              this.$alert(jsonResult.message, title, {
                confirmButtonText: '确定',
                callback: action => {
                }
              })
            }
          })
          console.log(this.tableData)
          this.currentPage = jsonResult.data.currentPage;
          this.pageSize = jsonResult.data.pageSize;
          this.total = jsonResult.data.total;
        } else {
          let title = '操作失败';
          this.$alert(jsonResult.message, title, {
            confirmButtonText: '确定',
            callback: action => {
            }
          })
        }
      })
    }
    },
    mounted() {
      this.loadUserList();
      var data = localStorage.getItem("loginInfo")
      var parse = JSON.parse(data);
      this.headers.Authorization = parse.token
      console.log(this.tableData)
    }
}
</script>

<template>
  <div>
    <!--面包屑导航区域-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/admin/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-input
        style="width: 300px;margin-top: 20px"
        placeholder="请输入内容"
        v-model="keyword"
        clearable
    >
    </el-input>
    <el-button
        @click="search()"
        slot="append"
        icon="el-icon-search"
    ></el-button>

    <el-button
        type="primary" @click="addDialogVisible = true">
      添加用户
    </el-button>

    <!--卡片视图区域-->
    <el-card style="margin-top: 20px;">
      <!--搜索与添加区域
      el-row->gutter="20":间隔为20
      el-col->span="8":长度为8
      -->





        <!-- 添加用户 -->

          <!-- 添加用户对话框 -->
          <el-dialog
              title="添加用户"
              :visible.sync="addDialogVisible"
              width="50%"
              @close="addDialogClosed"
          >
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" >
              <el-row>
                <el-col span="7">

              <el-form-item label="用户名" prop="username">
                <el-input v-model="ruleForm.username"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input v-model="ruleForm.password"></el-input>
              </el-form-item>
              <el-form-item label="昵称" prop="nickname">
                <el-input v-model="ruleForm.nickname"></el-input>
              </el-form-item>
              <el-form-item label="手机" prop="phone">
                <el-input
                    v-model="ruleForm.phone"
                ></el-input> </el-form-item
              >
                </el-col>
                <el-col span="10" style="padding-left: 160px;margin-top: 10px">
            <el-form-item label="性别" prop="gender">
              <el-radio-group v-model="ruleForm.gender">
                <el-radio  label="0">男</el-radio>
                <el-radio  label="1">女</el-radio>
              </el-radio-group>
            </el-form-item>
              <el-form-item label="状态" prop="enable">
                <el-radio-group v-model="ruleForm.enable">
                  <el-radio  label="1">启用</el-radio>
                  <el-radio  label="2">未启用</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="角色" prop="roleId">
                <el-radio-group v-model="ruleForm.roleId">
                  <el-radio  label="3">普通用户</el-radio>
                  <el-radio  label="4">笔记管理员</el-radio>
                  <br>
                  <el-radio  label="5">评论管理员</el-radio>
                </el-radio-group>
              </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <!-- 添加用户内容底部区域 -->
            <span slot="footer" class="dialog-footer">
              <el-button @click="addDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
            </span>
          </el-dialog>


      <!-- 用户列表区域 -->
      <!-- border->带边框,stripe->使用带斑马纹的表格,type="index"->索引列-->
      <el-table :data="tableData" border stripe style="margin-bottom: 20px;overflow: hidden">
        <el-table-column type="index"></el-table-column>
        <el-table-column width="120px" label="昵称" prop="nickname" align="center"></el-table-column>
        <el-table-column width="105px" label="头像"  align="center">
          <template slot-scope="scope">
            <!--scope.row得到当前行对应的对象-->
            <el-avatar :src="scope.row.avatar" width="80px"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column width="210px" label="用户名" prop="username"
                         :show-overflow-tooltip="true" header-align="center"></el-table-column>
        <el-table-column width="130px" label="电话" prop="phone"
                         :show-overflow-tooltip="true" align="center"></el-table-column>
        <el-table-column label="简介" prop="description"
                         :show-overflow-tooltip="true" header-align="center"></el-table-column>
<!--        是否删除-->
        <el-table-column width="90px"  label="是否删除" prop="enables"  :show-overflow-tooltip="true" v-show="false">
          <template slot-scope="tagScope">
            <el-tag :type="tagScope.row.enables.type">{{ tagScope.row.enables.text }}</el-tag>
          </template>
        </el-table-column>
        是否启用
        <el-table-column width="80px" label="是否封禁" align="center">
          <template slot-scope="scope">
            <el-switch
                @change="handleChange(scope.row)"
                v-model="scope.row.enable"
                :active-value="1"
                :inactive-value="0"
                active-color="#13ce66"
                inactive-color="#999">
            </el-switch>
          </template>
        </el-table-column>

        <el-table-column width="102px" prop="createTime" label="创建时间" ></el-table-column>
        <el-table-column width="102px" prop="updateTime" label="更新时间"></el-table-column>
        <el-tableColumn label="操作" width="180px" align="center">
          <!-- eslint-disable-next-line -->
          <template slot-scope="scope">
            <!-- 修改用户按钮 -->
            <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="StartEditUserInfo(scope.row)"
            ></el-button>

            <!-- 删除用户按钮 -->
            <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="openDeleteConfirm(scope.row)"
            ></el-button>
            <!-- 分配角色按钮 -->
            <!-- tooltip:提示框,enterable:自动隐藏 -->
            <el-tooltip
                class="item"
                effect="dark"
                content="分配角色"
                placement="top"
                enterable
            >
              <el-button
                  type="warning"
                  icon="el-icon-setting"
                  size="mini"
                  @click="openAssignRoleById(scope.row)"
              ></el-button> </el-tooltip>
          </template></el-tableColumn>
      </el-table>

      <!--分页区域-->
      <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :hide-on-single-page="true"
          :page-size="pageSize"
          layout="total, prev, pager, next,jumper"
          :total="total"
          background
      >
      </el-pagination>
    </el-card>

    <!-- 修改用户的对话框 -->
    <el-dialog title="修改用户"
               :visible.sync="editDialogVisible"
               width="60%">
      <el-form
          :model="editUserForm"
          :rules="editUserFormRules"
          ref="editUserForm"
          width="50%"
      >
        <template slot-scope="scope">
        <el-form-item  class="label_center" label="头像">
          <br>
          <el-upload
              :action="'http://60.204.154.55:17002/upload/image/avatar'"
              :headers="headers"
              name="file"
              :limit="1"
              list-type="picture-card"
              :on-success="handleSuccess"
              :auto-upload="true"
             >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-button  @click="updateAvatar(scope.row)" style="margin-top: 10px">修改</el-button>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname" style="width: 300px">
          <el-input v-model="editUserForm.nickname"  clearable></el-input>
          <el-button  @click="updatenickname(scope.row)"  style="margin-top: 10px">修改</el-button>
        </el-form-item>
        <el-form-item label="个性签名"  prop="personalized" style="width: 800px;padding-top: 10px">
          <br><el-input v-model="editUserForm.personalized"></el-input>
          <el-button  @click="updatePersonalized(scope.row)"  style="margin-top: 10px">修改</el-button>
        </el-form-item>
        </template>
      </el-form>
<!--      <span slot="footer" class="dialog-footer">-->
<!--        <el-button @click="editDialogVisible = false">取 消</el-button>-->
<!--        <el-button type="primary" @click="editUserInfo">确定</el-button>-->
<!--      </span>-->
    </el-dialog>

    <el-dialog
    title="分配角色"
    width="40%"
    :visible.sync="assignRoleById"
    >
      <template>
      <el-radio-group v-model="radio" >
        <el-radio  label="3">普通用户</el-radio>
        <el-radio  label="4">笔记管理员</el-radio>
        <el-radio  label="5">评论管理员</el-radio>
      </el-radio-group>
      <el-button type="primary" @click="roleByUserId()" size="small" style="float: right">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>